Dennis - Responsive Tailwind CSS Landing Template
Introduction
Dennis is responsive personal portfolio template. It's a modern, creative, clean, professional, attractive personal template. It is a beautifully handcrafted, pixel perfect HTML5 personal template based on the latest Tailwind css v3.x.. Dennis comes with 5 home demos Html pages. All files are organized we believe it will be easy to use and edit them. This template is well organized and very easy to customize. It's well documented which will help you to get your site running easy and fast. You can customize it very easily to fulfill your business needs.
We have added a Dark version with RTL supported in both Light and Dark version.
Please feel free to get back to me in case if you are having any question or feedback.
Setup HTML
Introduction
We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:
Prerequisites
Please follow below steps to install and setup all prerequisites:
-
Yarn
Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.
-
Nodejs
Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 16.
-
Gulp
Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command npm install -g gulp from your terminal.
-
Git
Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.
Installation
To setup the admin theme, follow below-mentioned steps:
-
Install Prerequisites
Make sure to have all above prerequisites installed & running on your computer
After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:
Command | Description |
---|---|
yarn install
|
This would install all the required dependencies in the node_modules folder.
|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000. |
gulp build
|
Generates a /dist directory with all the production files.
|
Folder & File Structure
Dennis_v1.0.0 │ ├── Documentation ├── HTML │ ├── dist folder ├── src folder │ └── assets │ └── css │ └── fonts │ └── imagess │ └── js │ └── php │ └── scss │ │ └── custom │ │ └── components │ │ └── tailwind.scss │ └── All HTML Files │ └── gulpfile.js └── package.json └── tailwind.config.js
CSS
Files are explained below:
File | Description |
---|---|
CSS |
You use icons.css and tailwind.css .
|
RTL Version |
In order to have RTL mode enabled, Please changes in the src/partials/main.html file update the html tag like <lang="en" class="light scroll-smooth" dir="rtl">
|
Dark Version |
Enable Dark mode, please add Dark class in HTML tag like <html class="dark">
|
Javascript
Files are explained below:
File | Description |
---|---|
app.js
|
This is a main js file. All important javascript like page loader, menu, sticky menu, menu-toggler, one page menu etc. |
plugins.init.js
|
All init js like working contact js, tiny slider, counter, countdown, maintenance, lightbox, gallery, swiper slider, aos animation etc. |
How to change the color in Dennis?
It's easy to change your color if your color is indigo-600 to another (red-600, red-400, orange-700, etc. as your theme primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors
How to change the fonts family in Dennis?
Please first of all open the tailwind.config.js
and please create your google fonts name in the module.exports > theme > fontFamily
For example: 'rubik': ['"Rubik", sans-serif'],
add your Google fonts like the above example.
Install Visual Studio Code
- Downloads the visual studio code https://code.visualstudio.com/download
- Now goto
Files -> Preferences -> Settings
. - Now goto
Extension
and please search and install Tailwind CSS IntelliSense otherwise install here, Tailwind CSS IntelliSense. - Now goto
Extension
and please search and install PostCSS Language Support - Type in the search box "
live sass compile
". - Now you wil able to very first option "
Live Sass Compile > Settings: Autoprefix
" option. Click on the below "Edit in settings.json
" link. - It will open a
settings.json
file in a new tab. Please put the below code in the file. -
{ "workbench.colorTheme": "Monokai", "workbench.iconTheme": "material-icon-theme", "liveServer.settings.donotShowInfoMsg": true, "explorer.confirmDelete": false, "workbench.sideBar.location": "left", "window.zoomLevel": 0, "liveSassCompile.settings.formats":[ // More Complex { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" }, ], "files.autoSave": "off", "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "terminal.integrated.shellArgs.windows": "null", "liveSassCompile.settings.autoprefix": [], "workbench.welcomePage.hiddenCategories": [ "Beginner", "Setup" ], }
Credits & Official Documentation
We've used the following resources as listed. These are some awesome creation and we are thankful to the community.
Supports
Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.
Stay awesome
- Shreethemes
Changelog
Version v1.0 - 3rd June 2023
- Initial Released